import { createApp } from "vue";
import naive from "naive-ui";
import App from "./components/ui/main.vue";
import SettingApp from "./components/ui/settings.vue";

import * as probes from "./components/libs/core/probes";
import { DataStore } from "./components/libs/core/storeDriver";
import { PageLifeProbeRequire } from "./data/settings";
import * as entries from "./entries";
import { StyleMgr } from "./components/libs/core/styleOperation";
import globalStyleValues from "./data/globalStyleValues";

const loader = () => {
  const allEntries: string[] = Object.keys(entries.default);
  const probesExecList: {
    [types: string]: ModulesConstructure[];
  } = {
    head: [],
    player: [],
    footer: [],
    loaded: [],
  };
  allEntries.forEach((e) => {
    probesExecList[
      entries.default[e].condition.pageLifeProbeRequire ?? "loaded"
    ].push(entries.default[e]);
  });
  return probesExecList;
};

const exec = (e: ModulesConstructure, location: string) => {
  const siteCondition = e.condition.siteMatch;
  if (siteCondition) {
    siteCondition.forEach((sc) => {
      if (sc.test(location)) {
        e.start();
      }
    });
  }
};

const main = async (): Promise<void> => {
  const probesExecList = loader();
  console.log(probesExecList);
  const location = window.location.href;
  if (DataStore.getGlobalEnabled()) {
    probes.headReady(() => {
      globalStyleVarLoad();
      probesExecList[PageLifeProbeRequire.Head].forEach((e) => {
        exec(e, location);
      });
      console.log("head is ok");
    });
    probes.playerReady(() => {
      probesExecList[PageLifeProbeRequire.Player].forEach((e) => {
        exec(e, location);
      });
      console.log("player is ok");
    });
    probes.footerReady(() => {
      probesExecList[PageLifeProbeRequire.Footer].forEach((e) => {
        exec(e, location);
      });
      mountOptionEntry();
      initSettingUi();
      console.log("footer is ok");
    });
    probes.loaded(() => {
      probesExecList[PageLifeProbeRequire.Loaded].forEach((e) => {
        exec(e, location);
      });
      console.log("loaded!");
    });
  }
};
main();

function initSettingUi(): void {
  const settingUi = document.createElement("div");
  settingUi.id = "achpntSettingUI";
  settingUi.style.cssText = `
    position: fixed;left: 10%;display:none;
    bottom: 110px;width:80%;background:#e2e2e2;z-index:100;
  `;
  document.querySelector("body")?.append(settingUi);

  const settingUIApp = createApp(SettingApp);
  settingUIApp.use(naive);
  settingUIApp.mount("#achpntSettingUI");
}

function mountOptionEntry(): void {
  const entryOuterWrapper = document.createElement("div");
  entryOuterWrapper.id = "achpntEntryOuter";
  entryOuterWrapper.style.cssText = "margin-left: 106px";
  document
    .querySelector(
      "#footer > div > div.clearfix.footer-link > div:nth-child(7)"
    )
    ?.after(entryOuterWrapper);

  const entryApp = createApp(App);
  entryApp.mount("#achpntEntryOuter");
}

function globalStyleVarLoad() {
  return StyleMgr.add("globalStyleVar", globalStyleValues);
}
